<template>
  <div class="notification-wrap">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-fa fa-book"></i> 通知管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 系统通知编辑与发送模块 -->
    <div class="system-notification">
      <h3>系统通知</h3>
      <el-input
        v-model="systemNotificationTitle"
        placeholder="请输入系统通知标题"
        class="notification-input"
      />
      <el-input
        type="textarea"
        v-model="systemNotificationContent"
        placeholder="请输入系统通知内容"
        rows="5"
        class="notification-input"
      />
      <el-button type="primary" @click="sendSystemNotification" class="send-btn">发送系统通知</el-button>
    </div>

    <!-- 课程选择和通知发送模块 -->
    <div class="course-notification">
      <h3>课程通知</h3>
      <el-select v-model="selectedCourseId" placeholder="选择课程" class="course-select">
        <el-option
          v-for="course in tableData"
          :key="course.id"
          :label="course.name"
          :value="course.id"
        />
      </el-select>

      <el-input
        v-model="courseNotificationTitle"
        placeholder="请输入课程通知标题"
        class="notification-input"
      />
      <el-input
        type="textarea"
        v-model="courseNotificationContent"
        placeholder="请输入课程通知内容"
        rows="5"
        class="notification-input"
      />
      <el-button type="primary" @click="sendCourseNotification" class="send-btn">发送课程通知</el-button>
    </div>

    <!-- 课程信息展示 -->
    <div class="container">
      <div class="table">
        <el-table :data="tableData" stripe>
          <el-table-column label="课程Id" prop="id" />
          <el-table-column label="课程名" prop="name" />
          <el-table-column label="年级" prop="grade" />
          <el-table-column label="学分" prop="credit" />
          <el-table-column label="上课时间" prop="time" />
          <el-table-column label="上课地点" prop="location" />
          <el-table-column label="选课人数" prop="selectedCount" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from "../../api/teacher/course";
import axios from 'axios';
import Config from '../../common/config.js';

export default {
  name: "NotificationManagement",
  data() {
    return {
      tableData: [], // 存储课程列表
      systemNotificationTitle: "", // 系统通知标题
      systemNotificationContent: "", // 系统通知内容
      courseNotificationTitle: "", // 课程通知标题
      courseNotificationContent: "", // 课程通知内容
      selectedCourseId: null, // 当前选中的课程ID
    };
  },
  methods: {
    // 获取课程列表
    getList() {
      api.list().then(res => {
        this.tableData = res;
      });
    },

    // 发送系统通知
    sendSystemNotification() {
      if (!this.systemNotificationTitle || !this.systemNotificationContent) {
        this.$message.error("请输入系统通知标题和内容");
        return;
      }
      axios.post(`${Config.backEndUrl}/notifications`, {
        title: this.systemNotificationTitle,
        content: this.systemNotificationContent,
      })
      .then(() => {
        this.$message.success("系统通知发送成功");
        this.systemNotificationTitle = ""; // 清空标题
        this.systemNotificationContent = ""; // 清空内容
      })
      .catch(error => {
        console.error("系统通知发送失败", error);
        this.$message.error("系统通知发送失败");
      });
    },

    // 发送课程通知
    sendCourseNotification() {
      if (!this.selectedCourseId) {
        this.$message.error("请选择课程");
        return;
      }
      if (!this.courseNotificationTitle || !this.courseNotificationContent) {
        this.$message.error("请输入课程通知标题和内容");
        return;
      }
      axios.post(`${Config.backEndUrl}/course-notifications`, {
        courseId: this.selectedCourseId,
        title: this.courseNotificationTitle,
        content: this.courseNotificationContent,
      })
      .then(() => {
        this.$message.success("课程通知发送成功");
        this.courseNotificationTitle = ""; // 清空标题
        this.courseNotificationContent = ""; // 清空内容
      })
      .catch(error => {
        console.error("课程通知发送失败", error);
        this.$message.error("课程通知发送失败");
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
.notification-wrap {
  padding: 20px;
}

.system-notification,
.course-notification {
  margin-bottom: 20px;
}

.notification-input {
  margin-top: 10px;
  width: 100%;
}

.send-btn {
  margin-top: 10px;
}

.course-select {
  width: 100%;
  margin-top: 10px;
}

.table {
  margin-top: 20px;
}
</style>
